<!DOCTYPE html>
<div id="container" style="float:left; height:100px;">
    <!-- 1x1 pixel GIF -->
    <img id="img" src="" style="height:100%;">
</div>
<div style="clear:both;"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    var container = document.getElementById("container");
    var img = document.getElementById("img");
    test(function() {
        assert_equals(container.offsetWidth, 100, "container width");
        assert_equals(container.offsetHeight, 100, "container height");
        assert_equals(img.offsetWidth, 100, "image width");
        assert_equals(img.offsetHeight, 100, "image height");

        container.style.height = "200px";
        assert_equals(container.offsetWidth, 200, "container width");
        assert_equals(container.offsetHeight, 200, "container height");
        assert_equals(img.offsetWidth, 200, "image width");
        assert_equals(img.offsetHeight, 200, "image height");

        container.style.height = "100px";
        assert_equals(container.offsetWidth, 100, "container width");
        assert_equals(container.offsetHeight, 100, "container height");
        assert_equals(img.offsetWidth, 100, "image width");
        assert_equals(img.offsetHeight, 100, "image height");
    }, "STF fixed height, percent height img");
</script>
